<template>
  <el-dialog :title="title" center :visible.sync="openState" :close-on-click-modal="false" width="1024px" append-to-body>
    <el-form ref="detailForm" :model="detailForm" :rules="rules" label-width="150px">
      <el-row type="flex">
        <el-col :span="12">
          <el-form-item label="账单编号" prop="billCode">
            <el-input v-model="detailForm.billCode" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex">
        <el-col :span="12">
          <el-form-item label="账单金额币种" prop="billCurcd">
            <el-input v-model="detailForm.billCurcd" />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="账单金额" prop="billAmt">
            <ht-amount-input
              v-model="detailForm.billAmt"
              placeholder="账单金额"
            ></ht-amount-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type="flex">
        <el-col :span="12">
          <el-form-item label="其他扣费币种" prop="otFeeCurcd">
            <el-input v-model="detailForm.otFeeCurcd" />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="其他扣费" prop="otFee">
            <ht-amount-input
              v-model="detailForm.otFee"
              placeholder="账单金额"

            ></ht-amount-input>
          </el-form-item>
        </el-col>
      </el-row>


      <el-row type="flex">
        <el-col :span="12">
          <el-form-item label="手续费币种" prop="serviceCurcd">
            <el-input v-model="detailForm.serviceCurcd" />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="手续费" prop="serviceAmt">
            <ht-amount-input
              v-model="detailForm.serviceAmt"
              placeholder="账单金额"

            ></ht-amount-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type="flex">
        <el-col :span="24">
          <el-form-item label="账期区间" prop="billDate">
            <el-input v-model="detailForm.billDate" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type="flex">
        <el-col :span="24">
          <el-form-item label="缴费内容" prop="paymentInfo">
            <el-input v-model="detailForm.paymentInfo" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div slot="footer" align="center" class="dialog-footer">
      <el-button type="primary" @click="confirm">提 交</el-button>
      <el-button type="primary" @click="close">关 闭</el-button>
    </div>
  </el-dialog>
</template>

<script>

import { amountThousandsFormatter } from "@/utils/table_col_formatter";
import { realTimePaymentEntryoriDetailQuery } from "@/api/cnaps/beps/363";
import HtAmountInput from "@/views/components/HtAmountInput";
import screenfull from "screenfull";

export default {
  name: "RealTimePaymentEntryOirListDailog",
  components: { HtAmountInput },
  props: {
    dictMap: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      title: "",
      openState: false,
      defaultSearchKey: "cnapsBankSearch-dialog",
      // 来源标识 为了服用区分是哪个选项触发的
      fromFlag: "",
      dictMapAsync: this.dictMap,
      tableLoadingState: false,
      formOptions: [],
      detailForm:{
        billCode:'',
        billCurcd:'CNY',
        billAmt:0,
        otFeeCurcd:'CNY',
        otFee:0,
        serviceCurcd:'CNY',
        serviceAmt:0,
        billDate:'',
        paymentInfo:'',
        payAmt:0,
        payCurcd:'CNY',
      },
      rules:{
        billAmt : [ { required: true, message: "请输入账单金额", trigger: "blur" }],
        billCode : [ { required: true, message: "请输入账单编号", trigger: "blur" }],

      }
    }
  },
  mounted() {

  },
  methods: {
    show() {
      this.openState = true;
    },
    close() {
      this.openState = false;
      this.resetForm("detailForm");
    },
    // 点击确认数据
    confirm() {
      this.$refs["detailForm"].validate((valid) => {
        if (valid) {
          const  list={
            billCode:this.detailForm.billCode,
            billCurcd:this.detailForm.billCurcd,
            billAmt:this.detailForm.billAmt,
            otFeeCurcd:this.detailForm.otFeeCurcd,
            otFee:this.detailForm.otFee,
            serviceCurcd:this.detailForm.serviceCurcd,
            serviceAmt:this.detailForm.serviceAmt,
            billDate:this.detailForm.billDate,
            paymentInfo:this.detailForm.paymentInfo,
            payAmt:parseInt(this.detailForm.billAmt)+parseInt(this.detailForm.otFee)+parseInt(this.detailForm.serviceAmt),
            payCurcd:this.detailForm.payCurcd,
          }
          this.$emit("confirm", list);
          this.openState = false;
          this.resetForm("detailForm");
        }})

    },
  },
};
</script>
<style scoped></style>
